<template>
  <component
    :is="dialog ? 'el-dialog' : 'div'"
    title="操作日志"
    :modelValue="visible"
    align-center
    width="1100px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="bg-white" :class="{ 'p-[16px]': !dialog }">
      <vxe-grid v-bind="tableOptions" ref="tableRef" class="log-table" />
    </div>
    <template v-if="dialog" #footer>
      <div class="flex justify-center py-[10px]">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </component>
</template>

<script setup lang="jsx">
import { getSpecialLog } from "@/api/public.js";
const tableRef = ref();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  tag: {
    type: String,
    default: "",
  },
  business_id: {
    type: [String, Number],
    default: "",
  },
  dialog: {
    type: Boolean,
    default: false,
  },
  autoLoad: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["update:modelValue", "close"]);

const isArray = (e) => {
  return Object.prototype.toString.call(e) === "[object Array]";
};

watch(
  () => props.business_id,
  (val) => {
    if (!val) return;
    nextTick(() => {
      tableRef?.value?.commitProxy("query");
    });
  }
);

const tableOptions = reactive({
  height: 560,
  border: "inner",
  pagerConfig: { pageSize: 20 },
  showOverflow: false,
  columns: [
    {
      field: "create_name",
      title: "操作人",
      width: 200,
    },
    { field: "create_time", title: "操作时间", width: 170 },
    { field: "op_title", title: "操作类型", width: 100 },
    {
      field: "op_content",
      title: "处理事项",
      minWidth: 320,
      slots: {
        default: ({ row }) => {
          return <div v-html={row.op_content}></div>;
        },
      },
    },
  ],
  proxyConfig: {
    autoLoad: props.autoLoad,
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page }) => {
        return getSpecialLog({
          ...page,
          tag: props.tag,
          record_id: props.business_id,
        });
      },
    },
  },
});

const handleClose = () => {
  emit("update:modelValue", false);
  emit("close");
};
</script>
